@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.app-header {
  @include flex(row, space-between, center);
  padding: 0 $spacing-lg;
  background: linear-gradient(135deg, $primary-color, darken($primary-color, 10%));
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  height: 64px;
  position: fixed;
  width: 100%;
  z-index: 1000;

  &-left {
    @include flex(row, flex-start, center);
    
    .logo {
      @include flex(row, center, center);
      color: white;
      font-size: $font-size-lg;
      font-weight: bold;
      margin-right: $spacing-lg;

      .anticon {
        font-size: 24px;
        margin-right: $spacing-xs;
      }
    }
  }

  &-right {
    @include flex(row, flex-end, center);
    
    .header-action {
      color: rgba(255, 255, 255, 0.85);
      padding: 0 $spacing-md;
      cursor: pointer;
      @include transition;

      &:hover {
        color: white;
      }

      .anticon {
        font-size: 16px;
      }
    }

    .user-dropdown {
      @include flex(row, center, center);
      margin-left: $spacing-md;

      .avatar {
        margin-right: $spacing-xs;
      }

      .username {
        color: white;
        margin-right: $spacing-xs;
      }
    }
  }
}

.layout-content {
  margin-top: 64px;
  min-height: calc(100vh - 64px);
} 